<template>
  <el-dialog v-model="dialogVisible" title="个人信息" width="500px" draggable>
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :model="userInfo"
      :hide-required-asterisk="dialogVisible"
    >
      <el-form-item label="头像" prop="avatar">
        <UploadImg v-model:image-url="userInfo!.avatar" width="135px" height="135px" :file-size="3" border-radius="50%">
          <template #empty>
            <el-icon>
              <Avatar />
            </el-icon>
            <span>请上传头像</span>
          </template>
          <template #tip> 头像大小不能超过 3M</template>
        </UploadImg>
      </el-form-item>
      <el-form-item label="姓名" prop="username">
        <el-input v-model="userInfo!.username" placeholder="请填写用户姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="角色列表" prop="roleNames">
        <el-checkbox-group v-model="userInfo.roleNames">
          <el-checkbox v-for="role in allRoles" :label="role.roleName" :key="role.roleName"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="userInfo!.age" placeholder="请填写年龄" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="userInfo!.gender" placeholder="请选择性别" clearable>
          <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="userInfo!.idCard" placeholder="请填写身份证号" clearable></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userInfo!.email" placeholder="请填写邮箱" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { genderType } from "@/utils/dict";
import UploadImg from "@/components/Upload/Img.vue";
import { getRoleList } from "@/api/modules/role";
import { useUserStore } from "@/stores/modules/user";
import { ElMessage, FormInstance } from "element-plus";
import { editUser } from "@/api/modules/user";

const rules = reactive({
  avatar: [{ required: true, message: "请上传用户头像" }],
  photo: [{ required: true, message: "请上传用户照片" }],
  username: [{ required: true, message: "请填写用户姓名" }],
  age: [{ required: true, message: "请填写年龄" }],
  gender: [{ required: true, message: "请选择性别" }],
  idCard: [{ required: true, message: "请填写身份证号" }],
  email: [{ required: true, message: "请填写邮箱" }],
  address: [{ required: true, message: "请填写居住地址" }],
  roleNames: [{ required: true, message: "请选择角色列表" }]
});

const allRoles = ref();
const getAllRoles = async () => {
  const { data } = await getRoleList({});
  allRoles.value = data.list;
};

const userStore = useUserStore();
const userInfo = userStore.userInfo;

const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
  getAllRoles();
};

// 提交数据
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await editUser(userInfo);
      ElMessage.success({ message: `${userInfo.username} 用户信息修改成功！` });
      dialogVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({ openDialog });
</script>
